<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网站</title>
</head>
<style>
	body{
		background:url("images/bgd.jpg");
		background-size: 100% 100%;
	}
	ul li{
		list-style: none;
		display:block;
		height: 200px;
		width:300px;
		border:2px solid olive;
		float: left;
		margin:0 auto;
		margin-left: 50px;
		margin-top: 20px;
	}
	a{
		text-decoration: none;
		color:rgb(24, 23, 23);
	}
	a:hover{
		color:white;
	}
	h1{
		margin: auto;
		height: 70px;
		width:100%;
	}
	img{
		width:300px;
		height: 150px;
	}
	.dt{
		text-align:center;
		width: auto;
		height: 25px;
		margin-top: 10px;
		background-color: rgb(228, 169, 59);
	}
	.dt:hover{
		background-color: olive;
	}
	.mytitle{
		text-align:center;
		color:olive;
	}
</style>
<body>
	<h1 class="mytitle">189000526 谭静</h1>
	<ul id="dowebok">
		<!-- <li>
			<div><a href="nine _nine.html"><img  src="images/nine_nine.png" alt="图片2"></a></div>
			<div class="dt"><a href="nine _nine.html">作品1:九九乘法表</a></div>
		</li> -->
		<li>
			<div><img  src="images/print_shape.png" alt="图片1"></div>
			<div class="dt"><a href="one.html">作品2：打印三角形、平行四边形、菱形</a></div>
		</li>
		<li>
			<div><a href="test1.html"><img  src="images/test1.png" alt="图片2"></a></div>
			<div class="dt"><a href="test1.html">作品3:实验1</a></div>
		</li>
		<li>
			<div><a href="test2.html"><img  src="images/test2.png" alt="图片2"></a></div>
			<div class="dt"><a href="test2.html">作品4:实验2</a></div>
		</li>
		<li>
			<div><a href="test3.html"><img  src="images/test3.png" alt="图片3"></a></div>
			<div class="dt"><a href="test3.html">作品5:实验3</a></div>
		</li>
		<li>
			<div><a href="test4.html"><img  src="images/test4.png" alt="图片4"></a></div>
			<div class="dt"><a href="test4.html">作品6:实验4</a></div>
		</li>
		<li>
			<div><a href="task2.html"><img  src="images/task2.png" alt="图片7"></a></div>
			<div class="dt"><a href="task2.html">作品7:实现菜单的收缩与扩展</a></div>
		</li>
		<li>
			<div><a href="event.html"><img  src="images/mytank.png"></a></div>
			<div class="dt"><a href="event.html">作品8:让坦克开起来</a></div>
		</li>
		<li>
			<div><a href="test5.html"><img  src="images/test5.png"></a></div>
			<div class="dt"><a href="test5.html">作品9:实验5</a></div>
		</li>
		<li>
			<div><a href="test6.html"><img  src="images/test6.png"></a></div>
			<div class="dt"><a href="test6.html">作品10:实验6</a></div>
		</li>
		<li>
			<div><a href="practice4.html"><img  src="images/practice.png"></a></div>
			<div class="dt"><a href="practice4.html">作品11:使用jQuery修改表格</a></div>
		</li>
		<li>
			<div><a href="html/test7.html"><img  src="images/test7/result.png"></a></div>
			<div class="dt"><a href="html/test7.html">作品12:实验7jquery制作游戏角色</a></div>
		</li>
		<li>
			<div><a href="html/test8.html"><img  src="images/test8/test8.png"></a></div>
			<div class="dt"><a href="html/test8.html">作品13:实验8jquery插件实现表单验证</a></div>
		</li>
	</ul>

</body>
</html>